<template>
    <div class="page confirm-order-container">
        <van-nav-bar title="确认订单" left-arrow></van-nav-bar>
        <!--收货信息-->
        <div class="receive-info">
            <div class="receive-name-phone">
                <div class="r-name">收货人：向可可</div>
                <div class="r-phone">13111111111</div>
            </div>
            <div class="receive-addr">
                <div class="addr-text">收货地址：广东省深圳市南山区科技中三路与科技中 四路交汇处国人通信大厦A动1102</div>
                <van-icon name="arrow" class="right"/>
            </div>
        </div>
        <!--分割线-->
        <div class="hr"></div>
        <!--订单列表-->
        <div class="order-list">
            <div class="order-item">
                <div class="item-content">
                    <router-link to="/confirmOrder" class="item-thumb">
                        <img src="../assets/images/order/goods.jpg" alt="">
                    </router-link>
                    <div class="item-desc">
                        <div class="item-title">iqos配件烟灰缸车载烟头罐日本 电子烟三代2.4plus</div>
                        <div class="item-specifications"></div>
                        <div class="item-price">
                            <span class="discount-price">¥889</span>
                            <s class="original-price">¥999</s>
                        </div>
                    </div>
                </div>
                <div class="item-count">
                    <div class="count-title">数量</div>
                    <van-stepper v-model="value" />
                </div>
            </div>
        </div>
        <!--备注-->
        <van-cell-group>
            <van-field label="备注" v-model="msg" placeholder="特殊需求请留言（45字以内）" />
        </van-cell-group>
        <!--优惠券-->
        <!-- 优惠券单元格 -->
        <van-coupon-cell
                class="coupon"
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                @click="showList = true"
        />
        <!-- 优惠券列表 -->
        <van-popup v-model="showList" position="bottom">
            <van-coupon-list
                    :coupons="coupons"
                    :chosen-coupon="chosenCoupon"
                    :disabled-coupons="disabledCoupons"
                    @change="onChange"
                    @exchange="onExchange"
            />
        </van-popup>
        <!--余额-->
        <van-cell-group>
            <van-switch-cell v-model="checked" :title="'余额：'+balance+'元可用'" />
        </van-cell-group>
        <!--升级会员-->
        <div class="upgrade-member">
            <div class="u-m-content">
                <div class="u-m-item">
                    <span class="u-m-icon">赚更多</span>
                    <span class="u-m-text">升级会员赚 <span class="money">¥5.88</span>元起</span>
                </div>
                <div class="u-m-item to-upgrade">
                    立即升级
                    <van-icon name="arrow" />
                </div>
            </div>
        </div>
        <!--订单金额-->
        <div class="order-money">
            <div class="o-m-content">
                <div class="freight">运费：¥0.00</div>
                <div class="total-money">商品总金额：<span class="t-m">¥1768.00</span></div>
            </div>
        </div>
        <!--底部-->
        <van-goods-action>
            <van-goods-action-big-btn
                    class="dark"
                    text="加入购物车"
            />
            <van-goods-action-big-btn
                    primary
                    text="马上买"
            />
        </van-goods-action>
    </div>
</template>

<script>
    const coupon = {
        available: 1,
        condition: '无使用门槛\n最多优惠12元',
        reason: '',
        value: 150,
        name: '优惠券名称',
        startAt: 1489104000,
        endAt: 1514592000,
        valueDesc: '1.5',
        unitDesc: '元'
    };
    export default {
        name: "ConfirmOrder",
        data() {
            return {
                chosenCoupon: -1,
                coupons: [coupon],
                disabledCoupons: [coupon],
                showList: false,
                checked: false,
                balance: '0.00',
                value: 1,
                msg: ''
            }
        },
        methods: {
            onChange(index) {
                this.showList = false;
                this.chosenCoupon = index;
            },
            onExchange(code) {
                this.coupons.push(coupon);
            }
        }
    }
</script>

<style scoped>
    .page {
        background: #F5F6F7;
        padding-bottom: 50px;
    }
    .receive-info {
        margin-top: 0.22rem;
        background: #fff;
    }
    .receive-name-phone {
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        padding: 10px 15px;
        box-sizing: border-box;
        line-height: 24px;
        position: relative;
        background-color: #fff;
        color: #323233;
        font-size: 14px;
        overflow: hidden;
    }
    .r-name,.r-phone {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    }
    .r-phone {
        overflow: hidden;
        text-align: right;
        position: relative;
        vertical-align: middle;
    }
    .receive-addr {
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        padding: 10px 15px;
        box-sizing: border-box;
        line-height: 24px;
        position: relative;
        background-color: #fff;
        color: #323233;
        font-size: 14px;
        overflow: hidden;
    }
    .receive-addr .addr-text {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        overflow: hidden;
        vertical-align: middle;
        text-align: left;
        color: #323233;
        padding-right: 34px;
    }
    .receive-addr .right {
        position: absolute;
        top: 50%;
        right: 15px;
        font-size: 16px;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    .hr {
        width: 100%;
        height: 5px;
        background: url("../assets/images/order/hr.png") top left / 100% no-repeat;
    }
    .order-list {
        margin-top: 0.2rem;
    }
    .order-item {
        position: relative;
        color: #323233;
        font-size: 12px;
        padding: 5px 15px;
        box-sizing: border-box;
        background-color: #fff;
        /*border-bottom: 1px solid #EFF1F3;*/
    }
    .order-item:after {
        content: '';
        display: block;
        width: 95%;
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 0;
        background: #EFF1F3;
    }
    .order-item:last-child:after{
        display: none;
    }
    .item-content {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    .item-thumb {
        position: relative;
        width: 90px;
        height: 90px;
        margin-right: 10px;
        -webkit-box-flex: 0;
        -webkit-flex: none;
        flex: none;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .item-thumb img {
        border: none;
        max-width: 100%;
        max-height: 100%;
    }
    .item-price {
        line-height: 20px;
    }
    .discount-price {
        font-size: 14px;
        display: inline-block;
        color: #f44;
        font-weight: bold;
    }
    .original-price {
        font-size: 11px;
        color: #B3B5B8;
    }
    .item-count {
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        align-items: center;
    }
    .coupon {
        margin-top: .2rem;
    }
    .upgrade-member {
        padding: .4rem .3rem;
        background: #fff;
    }
    .upgrade-member .u-m-content {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        height: 1rem;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        background: #EBC993;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .u-m-item {
        padding: 0 .3rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        align-items: center;
    }
    .u-m-icon {
        display: inline-block;
        padding: .1rem .18rem;
        background: #E7CD9A;
        -webkit-border-radius: 0.26rem;
        -moz-border-radius: 0.26rem;
        border-radius: 0.26rem;
    }
    .u-m-text {
        color: #412A00;
        margin-left: 5px;
    }
    .u-m-text .money {
        color: #FF6D74;
    }
    .to-upgrade {
        color: #412A00;
    }
    .order-money {
        margin-top: .2rem;
        padding: 0 .3rem;
        background: #fff;
        height: 1.32rem;
    }
    .o-m-content {
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        align-items: center;
    }
    .freight,.total-money {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 0 5px;
        font-size: .28rem;
        color: #9FA0A5;
    }
    .freight {
        text-align: right;
    }
    .total-money .t-m {
        color: #FF6D74;
    }

    .dark {
        background: #22262F;
    }
</style>